<template>
  <div>
    <el-form
      class="form-wrap basic-form"
      style="padding: 10px"
      ref="formData"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="隔离人员来源" prop="glPersonSource">
        <el-select
          v-model="formData.glPersonSource"
          placeholder="请输入隔离人员来源"
        >
          <el-option
            v-for="item in data_source"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预订批次">
        <span v-if="formData.batchNum">{{ formData.batchNum }}</span>
        <span v-else>系统自动生成</span>
      </el-form-item>
      <el-form-item label="批次说明">
        <el-input
          v-model="formData.batchName"
          placeholder="请输入批次说明"
        ></el-input>
      </el-form-item>
      <el-form-item label="预订人数" prop="bookPersonNum">
        <el-input
          type="number"
          v-model="formData.bookPersonNum"
          :min="0"
          placeholder="请输入预订人数"
        ></el-input>
      </el-form-item>
      <el-form-item label="预订间数" prop="bookRoomNum">
        <el-input
          type="number"
          v-model="formData.bookRoomNum"
          :min="0"
          placeholder="请输入预订间数"
        ></el-input>
      </el-form-item>

      <el-form-item label="预入住时间" prop="bookMoveTime">
        <el-date-picker
          v-model="formData.bookMoveTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          valueFormat="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="安排员" prop="arrangePerson">
        <el-input
          v-model="formData.arrangePerson"
          placeholder="请输入安排员"
        ></el-input>
      </el-form-item>
      <el-form-item label="安排时间" prop="arrangeTime">
        <el-date-picker
          v-model="formData.arrangeTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          valueFormat="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="人员清单附件">
        <v-upload
          ref="upload"
          :busId="formData.id"
          modelType="otherSupplements"
          @onSuccess="onSuccess"
          isShowFileList
          multiple
          v-model="uploadFileList"
        />
      </el-form-item>
      <el-form-item label=""> </el-form-item>
      <el-form-item label="">
        <div class="uploadBtns">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="/admin/sys-file/upLodeFileAdd"
            :auto-upload="false"
            :file-list="fileListUpload"
            :on-change="handleTemplateChange"
            accept=".doc, .docx, .pdf"
          >
            <el-button class="exportBtn" type="primary">上传附件</el-button>
          </el-upload>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="/admin/sys-file/upLodeFileAdd"
            :auto-upload="false"
            :file-list="fileListImport"
            :on-change="handleTemplateChange"
            accept=".doc, .docx, .pdf"
          >
            <el-button class="exportBtn" type="primary">导入</el-button>
          </el-upload>
          <el-button class="exportBtn" type="primary" @click="exportModule"
            >导出模板</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <div
      class="b-title mt20 mb12"
      v-if="formData.glPersonSource == '11' || formData.glPersonSource == '21'"
    >
      <span class="mr20">转运人员明细</span>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="openAdd"
        >添加人员</el-button
      >
    </div>
    <el-table
      v-if="formData.glPersonSource == '11' || formData.glPersonSource == '21'"
      :data="checkedUsers"
      :border="true"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="cardId" label="证件号码"> </el-table-column>
      <el-table-column prop="telPhone" label="联系方式"> </el-table-column>
      <el-table-column prop="remark" min-width="240" label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="60" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="delUser(scope.row, scope.$index)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button type="primary" @click="save">提交</el-button>
      <el-button @click="$parent.visible = false">关闭</el-button>
    </div>
    <choose-dialog
      ref="chooseDialog"
      v-bind="chooseDialogAttrs"
      @chooseData="handleChoose"
    />
  </div>
</template>

<script>
export default {
  name: "hotelReserveComponent",
  inject: ["initList"],
  data() {
    return {
      rules: {
        glPersonSource: [
          { required: true, message: "请选择隔离人员来源", trigger: "change" },
        ],
        bookPersonNum: [
          { required: true, message: "请输入预订人数", trigger: "blur" },
        ],
        bookRoomNum: [
          { required: true, message: "请输入预订间数", trigger: "blur" },
        ],
        arrangePerson: [
          { required: true, message: "请输入安排员", trigger: "blur" },
        ],
        arrangeTime: [
          { required: true, message: "请选择安排时间", trigger: "blur" },
        ],
      },
      formData: {},
      checkedUsers: [],
      data_source: [
        { label: "yy", value: 11 },
        { label: "xx", value: 121 },
      ],
      // 上传文件列表
      uploadFileList: [],
      filterItemList: [],
    };
  },
  computed: {
    chooseDialogAttrs() {
      return {
        title: "添加转运人员",
        placeholder: "请输入转运单号",
        url: `/api/epcprojectaccept/selectContract`,
        width: "1200px",
        searchKey: "num",
        showIndex: true,
        showData: [
          {
            prop: "username",
            label: "姓名",
            width: "200",
            align: "center",
          },
          {
            prop: "identificationNumber",
            label: "证件号码",
            width: "140",
            align: "center",
            formatter: this.dataFormatter,
          },
          {
            prop: "phone",
            label: "联系方式",
            width: "200",
            align: "center",
          },
          {
            prop: "contractDate",
            label: "签订日期",
            width: "200",
            align: "center",
          },
        ],
      };
    },
  },
  methods: {
    // 提交预订
    async save() {
      try {
        const valid = await this.$refs.dialogForm.validate();
        if (!valid) return;
        // 调用保存接口
      } catch (error) {
        //console.log(error)
      }
    },
    // 上传文件
    onSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    // 导入
    async exportData() {
      this.publicExport(
        "修缮概览记录",
        "/api/operating/repair/overview/export",
        this.params
      );
    },
    //导入模板
    async exportData() {
      this.publicExport(
        "修缮概览记录",
        "/api/operating/repair/overview/export",
        this.params
      );
    },
    //删除转运人员
    delUser(row, index) {},
    //添加转运人员
    openAdd() {
      this.$refs.chooseDialog.show();
    },
    handleChoose(data) {
      //拿到选择的转运人员
    },
    // 监听上传模板
    handleTemplateChange(file, fileList) {
      // 如果当前场景是新增
      const previewType = file.name.split(".").pop();
      this.previewType = previewType;

      let url = window.URL.createObjectURL(file.raw);
      this.pdfUrl = url;

      this.fileList = [file];

      this.$alert("模板替换成功，请点击下一步保存新的模板附件");
    },
    exportModule() {
      this.publicExport(
        "定时任务日志数据",
        "/admin/task/jobs/logs/download",
        this.params
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  text-align: right;
}
.uploadBtns {
  display: flex;
  justify-content: flex-end;
  .el-button{
    margin-left: 10px;
  }
}
</style>